<template>
	<view class="video_play">
		<!-- 视频第一帧 -->
		<view class="img" v-if="isShowFirstFrame">
			<image class="firstFrame"
				:src="explain?.videoInfo?.firstFrame || data?.firstFrame || data?.explainInfo?.firstFrame"
				mode="widthFix" @click="onPlay"></image>
			<!-- 播放图标 -->
			<view class="icon play cuIcon-playfill"></view>
		</view>
		<!-- 视频 -->
		<view class="video">
			<video :src="explain?.videoInfo?.url || data?.videoUrl || data?.explainInfo?.url" :show-loading="true"
				:controls="false" id="el_video" @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata"
				@ended="onEnded" @click="controlToggle"></video>
			<!-- 控件 -->
			<view class="contorl" v-show="isShowControl">
				<view class="btn">
					<!-- 开始 -->
					<view v-if="!isPlay" class="icon cuIcon-playfill" @click="onPlay"></view>
					<!-- 暂停 -->
					<view v-if="isPlay" class="icon cuIcon-stop" @click="onPause"></view>
				</view>
				<view class="sliding">
					<slider :value="sliderValue" @change="sliderChange" step="1" min="0" max="100"
						@changing="onChanging" />
				</view>
				<view class="time">
					<span class="currentTime">{{currentTime}}</span>
					<span>/</span>
					<span class="endTime">{{totalDuration}}</span>
				</view>
			</view>


		</view>
		<!-- 展示层 -->
		<view class="index_top" v-if="detail && comment">
			<!-- 热门直播 -->
			<view class="n hotLink" @click="gotoLive">
				<view class="userImgBox">
					<view :class="['item',hotLinkImgClass[index]]" v-for="(item,index) in detail.hotLink.avatars">
						<image :src="item" mode="widthFix" load></image>
					</view>
				</view>
				<view class="text">
					热门直播
				</view>
				<view class="icon cuIcon-right">

				</view>
			</view>
			<!-- 右边盒子 -->
			<view class="right">
				<view class="n item userImg" @click="gotoAnchorShop">
					<image :src="explain.actorInfo.avatar" mode="widthFix" load></image>
					<view class="btn">
						关注
					</view>
				</view>
				<view class="n item cellect ">
					<view class="icon cuIcon-favorfill"></view>
					<view class="text">
						收藏
					</view>
				</view>
				<view class="n item cellect" @click="showCommentToggle">
					<view class="icon cuIcon-messagefill"></view>
					<view class="text">
						{{comment.total}}
					</view>
				</view>
				<view class="n item cellect ">
					<view class="icon cuIcon-cartfill"></view>
					<view class="text">
						购物车
					</view>
				</view>
			</view>
			<!-- 底部盒子 -->
			<view class="bottom">
				<!-- 上半部分 -->
				<view class="top" v-show="true">
					<view
						:class="['item',{animation_delay:comments_index_list.length==1} ,comments_index_list.length==1?animate_class[2]:comments_index_list.length==2?animate_class.slice(1,)[index]:animate_class[index]]"
						v-for="(item,index) in comments_index_list" :key="item"
						:style="!explain.comments[item]?'opacity: 0 !important;':''">
						<view class="img">
							<image :src="explain.comments[item]?.avatar" mode="aspectFill" lazy-load></image>
						</view>
						<view class="right">
							{{explain.comments[item]?.content?.slice(0,7) || '占位'}}
						</view>
					</view>
				</view>
				<!-- 中间部分 -->
				<view class="middle">
					<view class="nickname">
						@{{explain.actorInfo.name}}
					</view>
					<view class="info">
						<view class="left">
							<span>{{explain.actorInfo.height}}cm</span>
							<span>{{explain.actorInfo.weight}}kg</span>
						</view>
						<view class="line" v-if="explain.actorInfo.height || explain.actorInfo.weight">
							|
						</view>
						<view class="right">
							<span>{{explain.actorInfo.fansCount}}</span>
						</view>
					</view>
				</view>
				<!-- 下部分 -->
				<view class="n bottom animation-slide-bottom" @click="showBuyToggle">
					<view class="img">
						<image :src="explain.itemInfo.cover" mode="" load></image>
					</view>
					<view class="text">
						<view class="title">
							{{explain.itemInfo.title}}
						</view>
						<view class="price">
							<view class="label">
								待秒杀
							</view>
							<view class="price">
								￥{{explain.itemInfo.discountPrice}}
							</view>
							<view class="unit">
								￥
							</view>
						</view>
					</view>
					<view class="btn">
						立刻购买
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="popup">
			<!-- 购买弹窗 -->
			<view class="buy n" v-if="isShowBuy">
				<view class="box">
					<!-- 关闭按钮 -->
					<view class="btn icon cuIcon-close" @click="showBuyToggle"></view>
					<!-- 上部分 -->
					<view class="top">
						<view class="img">
							<image :src="explain.itemInfo.cover" mode="aspectFill" load></image>
						</view>
						<view class="text">
							<view class="title" @click="toDetail(explain.itemInfo.itemId)">
								{{explain.itemInfo.title}}
							</view>
							<view class="price">
								￥{{price}}
							</view>
						</view>
					</view>
					<!-- 中部分 -->
					<view class="middle">
						<view class="item" v-for="item in good_style" :key="item.label">
							<view class="title">
								{{item.label}}
							</view>
							<view class="box">
								<view :class="['name',{active:item2.name==guiGe[item.label]}]"
									v-for="(item2,index2) in item.list" :key="item2.name"
									@touchstart="()=>{guiGe[item.label]=item2.name}">
									{{item2.name}}
								</view>
							</view>
						</view>
						<view class="count">
							<view class="title">
								数量
							</view>
							<view class="box">
								<view class="btn move cuIcon-move" @touchstart="()=>{buy_count>1?buy_count-=1:''}">
								</view>
								<view class="num">
									{{buy_count}}
								</view>
								<view class="btn add cuIcon-add" @touchstart="()=>{buy_count+=1}">

								</view>
							</view>
						</view>
					</view>
					<!-- 下部分 -->
					<view class=" btn group">
						<view class="item btn1" @click="addToCart">
							加入购物车
						</view>
						<view class="item btn2">
							立即购买
						</view>
					</view>
				</view>
			</view>
			<!-- 评论弹窗 -->
			<view class="comment n" v-if="isShowComment">
				<view class="box">
					<!-- 头部 -->
					<view class="top">
						<view class="total">
							<span>购买评价</span>
							<span>{{comment.total}}</span>
						</view>
						<!-- 关闭按钮 -->
						<view class="btn icon cuIcon-close" @click="showCommentToggle"></view>
					</view>
					<!-- 列表 -->
					<view class="list">
						<view class="item" v-for="item in comment.commentList" :key="item.commentId">
							<view class="img">
								<image :src="item.avatar" mode="aspectFill" lazy-load></image>
							</view>
							<view class="right">
								<view class="top">
									<view class="nickname">
										{{item.userName}}
									</view>
									<view class="time">
										{{item.time}}
									</view>
								</view>
								<view class="bottom">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		useVideData
	} from '../../store/videoDetail';
	import {
		req_video_detail,
		req_video_comment,
		req_goods_detail
	} from './video_play_api.js'
	import {
		onUnload
	} from '@dcloudio/uni-app';
	// 页面
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const options = currentPage.options; // 部分端可能不支持
	// 视频仓库
	const videoStore = useVideData()
	const data = videoStore.item
	const itemId = options.itemId || data.itemIdUrl
	const actorId = options.actorId || data.actorIdUrl
	const explainId = options.explainId || data.explainId
	// 视频实例
	const el_video = ref(null)
	// 播放状态
	const isPlay = ref(false)
	// 是否显示视频第一帧
	const isShowFirstFrame = ref(true)
	// 视频时间
	const totalDuration_ = ref(0)
	const totalDuration = computed(() => formatTime(parseInt(totalDuration_.value)))
	// 当前播放时间
	const currentTime_ = ref(0)
	const currentTime = computed(() => formatTime(parseInt(currentTime_.value)))
	// 进度条
	const sliderValue = ref(0)
	// 是否显示控件
	const isShowControl = ref(false)
	const hideControlTimerID = ref(null)
	// 详情
	const detail = ref(null)
	// 商品解说
	const explain = ref(null)
	// 评论
	const comment = ref(null)
	// 热门直播用户头像类名
	const hotLinkImgClass = ref([
		"userImg1",
		"userImg2",
		"userImg3",
	])
	// 热门直播用户头像类名 定时器
	const hotLinkImgClassTimerID = ref(Number(uni.getStorageSync('hotLinkImgClassTimerID')) || null)
	// 购买弹窗开关
	const isShowBuy = ref(false)
	// 评论弹窗开关
	const isShowComment = ref(false)
	// 商品颜色尺寸列表
	const good_style = ref(null)
	// 购买数量
	const buy_count = ref(1)
	// 规格
	const guiGe = ref({})
	// 价格
	const price = ref('')
	// 动画控制
	const animate_class = ref([
		'animation-slide-top animation-reverse pos_abs',
		'animation_translate-top',
		'animation-slide-bottom'
	])
	// 最大评论索引
	const max_comments_index = ref(0)
	// 评论索引列表
	const comments_index_list = ref([0])
	// 评论动画定时器
	const comment_animate_timerId = ref(null)
	// 评论动画开始延时器
	const animation_start_timerId = ref(null)

	// 页面挂载
	onMounted(() => {
		getInitData()
		getVideoTag()
		hotLinkImgClassTimerFn()
	})

	// 页面之前卸载
	onUnload(() => {
		console.log('页面卸载');
		if (hotLinkImgClassTimerID.value) clearInterval(hotLinkImgClassTimerID.value)
		if (hideControlTimerID.value) clearInterval(hideControlTimerID.value)
		if (comment_animate_timerId.value) clearInterval(comment_animate_timerId.value)
		if (animation_start_timerId.value) clearInterval(animation_start_timerId.value)
	})

	// 请求到说明数据后
	watch(explain, () => {
		price.value = explain.value.itemInfo.discountPrice
		max_comments_index.value = explain.value.comments.length
	})
	// 规格样式请求完成后
	watch(good_style, () => {
		good_style.value.forEach(v => {
			guiGe.value[v.label] = v.list[0].name
		})
	})

	// 跳转热门直播
	const gotoLive = () => {
		uni.switchTab({
			url: "/pages/live/live"
		})
	}

	// 添加购物车
	const addToCart = () => {
		let cartList = uni.getStorageSync('cart') || []
		let id = explain.value.itemInfo.itemId
		if (cartList.some(v => v.id == id)) {
			uni.showToast({
				title: '已加入购物车'
			})
			return
		}
		if (true) {
			let obj = {
				id: id,
				title: explain.value.itemInfo.title,
				img_url: explain.value.itemInfo.cover,
				color: guiGe.value["颜色"],
				size: guiGe.value["尺寸"],
				num: buy_count.value,
				price: explain.value.itemInfo.discountPrice

			}
			let newArr = [...cartList, obj]
			uni.setStorageSync('cart', newArr)
			uni.showToast({
				title: '加入购物车成功'
			})
			showBuyToggle()
		} else {
			uni.showToast({
				title: '请选择参数',
				duration: 3000,
				icon: 'error'
			})
		}
	}

	// 自动改变评论索引
	const comment_index_auto_change = () => {
		comment_animate_timerId.value = setInterval(() => {
			const len = comments_index_list.value.length
			const lastIndex = comments_index_list.value[len - 1]
			const max_index = max_comments_index.value

			if (max_index == 0) {
				if (comment_animate_timerId.value) clearInterval(comment_animate_timerId.value)
				comment_index_auto_change()
				return
			}

			if (lastIndex >= max_index + 1 || len == 0) {
				if (comment_animate_timerId.value) clearInterval(comment_animate_timerId.value)
				return
			}

			// if (!explain.value.comments[lastIndex + 1]) {
			// 	comments_index_list.value.shift()
			if (len >= 3) {
				comments_index_list.value = comments_index_list.value.slice(1, 3)
				comments_index_list.value.push(lastIndex + 1)
			} else {
				comments_index_list.value.push(lastIndex + 1)
				console.log(comments_index_list.value);
			}

		}, 2000)
	}

	// 跳转主播商店
	const gotoAnchorShop = () => {
		uni.navigateTo({
			url: '/pages/anchorShop/anchorShop?uid=' + actorId
		})
	}

	// isShowComment切换
	const showCommentToggle = () => {
		isShowComment.value = !isShowComment.value
	}
	// isShowBuy切换
	const showBuyToggle = () => {
		isShowBuy.value = !isShowBuy.value
	}

	// 热门直播切换类名
	const hotLinkImgClassTimerFn = () => {
		if (hotLinkImgClassTimerID.value) clearInterval(hotLinkImgClassTimerID.value)
		hotLinkImgClassTimerID.value = setInterval(() => {
			let temp1 = hotLinkImgClass.value.shift()
			hotLinkImgClass.value.push(temp1)
		}, 2000)
		uni.setStorageSync('hotLinkImgClassTimerID', hotLinkImgClassTimerID.value)
	}

	// 获取详情与评论
	const getInitData = async () => {
		const params = {
			actorId,
			itemId
		}
		uni.showLoading({
			title: '加载中'
		});
		// 商品详情
		req_goods_detail({
				itemId
			})
			.then(res => {
				good_style.value = res.data.result.skuInfo.props
				console.log("商品样式列表", good_style.value);
			})

		const req_ = [
			req_video_detail(params)
			.then(res => {
				console.log("视频详情", res.data);
				detail.value = res.data
				explain.value = detail.value.itemExplainList.find(v => v.explainId == explainId)
				console.log("商品说明", explain.value);
				return 'detail ok'
			}),
			req_video_comment(params)
			.then(res => {
				console.log("评论", res.data);
				comment.value = res.data
				return 'comment ok'
			})
		]
		const result = await Promise.all(req_)
		uni.hideLoading()
		if (animation_start_timerId.value) clearTimeout(animation_start_timerId.value)
		animation_start_timerId.value = setTimeout(() => {
			// 执行动画索引切换
			comment_index_auto_change()
		}, 2000)
	}

	// 视频结束时
	const onEnded = () => {
		isShowFirstFrame.value = true
	}

	// 控件显示切换
	const controlToggle = () => {
		if (hideControlTimerID.value) clearTimeout(hideControlTimerID.value)
		isShowControl.value = !isShowControl.value
		hideControlTimerID.value = setTimeout(() => {
			isShowControl.value = false
		}, 5000)
	}

	// 格式化时间
	const formatTime = (seconds) => {
		// 确保秒数是数字类型
		seconds = Number(seconds);

		// 计算分钟和剩余的秒数
		const mins = Math.floor(seconds / 60);
		const secs = Math.floor(seconds % 60);

		// 使用 padStart 补零，确保两位数显示
		const formattedMins = String(mins).padStart(2, '0');
		const formattedSecs = String(secs).padStart(2, '0');

		// 返回格式化后的字符串
		return `${formattedMins}:${formattedSecs}`;
	}

	// 获取视频标签
	const getVideoTag = () => {
		el_video.value = uni.createVideoContext('el_video', getCurrentInstance())
	}

	// 播放
	const onPlay = () => {
		if (el_video.value) {
			el_video.value.play()
			isPlay.value = true
			isShowFirstFrame.value = false
		}
	}

	// 暂停
	const onPause = () => {
		if (el_video.value) {
			el_video.value.pause()
			isPlay.value = false
		}
	}

	// 时间更新事件
	const onTimeUpdate = (e) => {
		if (!totalDuration_.value) {
			totalDuration_.value = e.detail.duration
		}
		currentTime_.value = e.detail.currentTime
		sliderValue.value = (currentTime_.value / totalDuration_.value * 100).toFixed(0)
	}

	// 视频元数据加载完成事件
	const onLoadedMetadata = (e) => {
		if (el_video.value) {
			totalDuration_.value = el_video.value.duration || 0
		}
	}

	// 进度条改变
	const sliderChange = (e) => {
		onPause()
		el_video.value.seek(e.detail.value / 100 * totalDuration_.value)
		onPlay()
	}

	// 进度条拖动时
	const onChanging = () => {
		onPause()
	}
	const toDetail = (iid) => {
		uni.navigateTo({
			url: `/pages/detail/detail?itemId=${iid}`
		});
	}
</script>

<style lang="scss">
	@keyframes translate-top {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	image {
		vertical-align: middle;
	}

	.pos_abs {
		position: absolute;
		width: 100%;
		top: 0;
		transform: translateY(-100%);
	}

	.animation_translate-top {
		animation: translate-top 0.5s ease-out;
	}

	.animation_delay {
		animation-delay: 1.5s;
	}

	.video_play {
		width: 100vw;
		height: 100vh;
		position: relative;

		>.img {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;

			.firstFrame {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1;
			}

			.icon.play {
				position: absolute;
				z-index: 2;
				font-size: 2rem;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				padding: 20upx;
				color: white;
				pointer-events: none;
			}
		}

		>.video {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
			overflow: hidden;

			video {
				width: 100%;
				height: 100%;
			}

			.contorl {
				width: 100%;
				padding: 10upx;
				position: absolute;
				z-index: 1;
				bottom: 0;
				display: flex;
				align-items: center;
				font-size: 0.8rem;
				color: #fff;

				.icon {
					font-size: 1.5rem;
				}

				// 滑块组件
				.sliding {
					width: 100%;

					:deep(uni-slider) {
						.uni-slider-wrapper {
							.uni-slider-tap-area {
								.uni-slider-handle-wrapper {
									background-color: rgba(0, 0, 0, 0.4) !important;
									height: 6upx;


									.uni-slider-handle {
										width: 30upx !important;
										height: 30upx !important;
										transform: translateY(50%);
									}

									.uni-slider-thumb {
										height: 30upx !important;
										width: 30upx !important;
										transform: translateY(50%);
									}

									.uni-slider-track {
										background-color: #fff !important;
									}
								}
							}
						}
					}
				}
			}
		}

		>.index_top {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 20;
			pointer-events: none;

			.n {
				pointer-events: auto;
			}

			>.hotLink {
				display: flex;
				align-items: center;
				padding: 5upx 10upx;
				background-color: rgba(0, 0, 0, 0.7);
				color: white;
				width: fit-content;
				border-radius: 40upx;
				position: absolute;
				top: 40upx;
				left: 40upx;
				font-size: 0.7rem;

				.userImgBox {
					display: flex;
					width: 120upx;
					position: relative;

					.item {
						overflow: hidden;
						border-radius: 50%;
						border: 1upx solid white;
						transition: all 0.5s;
						box-sizing: border-box;
						flex-shrink: 0;
						z-index: 0;

						&.userImg1 {
							position: relative;
							z-index: 0;
						}

						&.userImg2 {
							position: absolute;
							z-index: 10;
							transform: translateX(40%);

						}

						&.userImg3 {
							position: absolute;
							z-index: 20;
							transform: translateX(80%);
						}
					}

					image {
						width: 60upx;
						height: 60upx;
					}
				}
			}

			>.right {
				display: flex;
				flex-direction: column;
				gap: 30upx;
				align-items: center;
				position: absolute;
				right: 40rpx;
				top: 48%;
				color: #fff;
				text-align: center;
				font-size: 0.7rem;

				.icon {
					font-size: 2rem;
				}

				.userImg {
					height: 80upx;
					width: 80upx;

					image {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						border: 1upx solid white;
					}

					.btn {
						background-color: #FF4466;
						border-radius: 0.8rem;
						transform: translateY(-50%);
					}
				}
			}

			>.bottom {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				padding: 0 40upx 80upx 40upx;
				box-sizing: border-box;
				color: white;

				>.top {
					max-height: 140upx;
					overflow: hidden;

					.item {
						max-width: 260upx;
						overflow: hidden;
						white-space: nowrap;
						display: flex;
						gap: 5upx;
						background-color: #fff;
						padding: 10upx;
						border-radius: 10upx;
						color: gray;
						font-size: 0.8rem;
						box-sizing: border-box;
						margin-bottom: 10upx;

						.img {
							image {
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
							}
						}

						.right {
							overflow: hidden;
							flex-grow: 1;
						}
					}
				}

				>.middle {
					margin: 10upx 0;

					.nickname {
						font-size: 1.1rem;
					}

					.info {
						margin-top: 10upx;
						display: flex;
						color: rgba(255, 255, 255, 0.7);
						font-size: 0.7rem;

						span {
							margin-right: 10upx;
						}

						.line {
							margin: 0 10upx;
						}
					}
				}

				>.bottom {
					border-radius: 5upx;
					animation-delay: 1.5s;
					background-color: rgba(0, 0, 0, 0.5);
					padding: 10upx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: nowrap;
					gap: 20upx;
					position: relative;
					align-items: center;

					>.img {
						flex-shrink: 0;

						image {
							border-radius: 5upx;
							width: 100upx;
							height: 100upx;
						}

					}

					>.text {
						flex-grow: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.title {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						>.price {
							display: flex;
							align-items: center;

							.label {
								background-image: linear-gradient(to right, #FC7632, #FC4940);
								border-radius: 5upx;
								font-size: 0.6rem;
								padding: 5upx;
								transform: scaleY(0.9);
								height: fit-content;
							}

							.price {
								color: #FF4466;
								font-size: 1rem;
								font-weight: bold;
							}

							.unit {
								align-self: self-end;
								font-size: 0.7rem;
								color: rgba(255, 255, 255, 0.5);
							}
						}

					}

					>.btn {
						flex-shrink: 0;
						background-color: #FF4466;
						height: fit-content;
						padding: 6upx 12upx;
						border-radius: 1rem;
						font-size: 0.8rem;
					}
				}
			}
		}

		>.popup {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 30;
			pointer-events: none;

			.n {
				pointer-events: auto;
			}

			>.buy {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: end;
				z-index: 10;

				>.box {
					width: 100%;
					box-sizing: border-box;

					background-color: rgba(0, 0, 0, 0.8);
					box-sizing: border-box;
					color: white;
					position: relative;

					>.btn.cuIcon-close {
						font-size: 1.5rem;
						color: gray;
						position: absolute;
						right: 20upx;
						top: 20upx;
					}

					>.top {
						display: flex;
						position: relative;
						gap: 20upx;
						padding: 20upx;
						margin-right: 70upx;

						.img {
							image {
								width: 200upx;
								height: 200upx;
								border-radius: 10upx;
							}
						}

						.text {
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.title {
								display: -webkit-box;
								/* 必须结合弹性盒子模型 */
								-webkit-box-orient: vertical;
								/* 文本排列方向为垂直 */
								-webkit-line-clamp: 2;
								/* 限制显示的行数 */
								overflow: hidden;
								font-size: 1rem;
							}

							.price {
								color: #FF4466;
							}
						}
					}

					>.middle {
						padding: 20upx;
						border: 1upx solid rgba(255, 255, 255, 0.2);
						display: flex;
						flex-direction: column;
						gap: 20upx;
						height: 400upx;
						overflow-y: scroll;

						.item {
							.title {}

							.box {
								display: flex;
								margin: 5upx 0;
								gap: 10upx;
								flex-wrap: wrap;

								.name {
									border: 1px solid gray;
									color: rgba(200, 200, 200, 1);
									width: fit-content;
									padding: 10upx;
									border-radius: 10upx;

									&.active {
										border-color: #FF4466;
										color: #FF4466;
									}
								}
							}

						}

						.count {
							>.box {
								display: flex;
								gap: 2upx;
								text-align: center;
								line-height: 50upx;
								margin: 5upx 0;

								.btn {
									background-color: #413A3A;
									width: 50upx;
									height: 50upx;
								}

								.add {
									color: #FF4466;
								}

								.num {
									background-color: #413A3A;
									width: 50upx;
									height: 50upx;
									overflow: hidden;
								}



							}
						}
					}

					>.btn.group {
						display: flex;
						padding: 20upx;
						text-align: center;
						gap: 20upx;

						.item {
							flex-grow: 1;
							font-size: 1rem;
							padding: 20upx 0;
							border-radius: 5upx;
						}

						.btn1 {
							color: #FF4466;
							background-color: #fff;
						}

						.btn2 {
							background-color: #FF4466;
							color: #fff;
						}
					}
				}
			}

			.comment {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 20;
				display: flex;
				align-items: end;

				.box {
					background-color: rgba(0, 0, 0, 0.8);
					position: relative;
					font-size: 0.8rem;
					color: rgb(138, 138, 138);
					padding: 20upx;
					width: 100%;
					height: 50%;


					>.top {
						display: flex;
						justify-content: space-between;
						font-size: 1rem;
						height: 15%;

						.btn {
							font-size: 1.5rem;
						}
					}

					>.list {
						display: flex;
						flex-direction: column;
						gap: 20upx;
						overflow-y: scroll;
						height: 85%;
						overflow-y: scroll;

						.item {
							display: flex;
							gap: 20upx;

							.img {
								width: 60upx;
								height: 60upx;

								image {
									width: 60upx;
									height: 60upx;
									border-radius: 50%;
								}
							}

							.right {
								padding-bottom: 60upx;
								border-bottom: 1px solid rgba(255, 255, 255, 0.2);
								width: 100%;

								.top {
									margin-bottom: 10upx;

									.time {
										font-size: 0.7rem;
									}
								}

								.bottom {
									color: white;
								}
							}
						}
					}
				}
			}
		}
	}
</style>